import { Shape } from "src/types/shape";
import Rect from "./Rect";
import Scene from "./Scene";

class Point {
  x = 0
  y = 0
}

export default class {
  scene: Scene
  public select: boolean = true
  public selectShape: Shape[] = []
  private enable: boolean = false
  private shape!: Rect
  private mousedown: any
  private mousemove: any
  private mouseup: any
  private point = {
    pre: new Point(),
    cur: new Point(),
  }
  constructor(scene: Scene) {
    this.scene = scene
  }
  open() {
    this.shape = new Rect({ x: 0, y: 0, width: 0, height: 0, model: 'all', bgcolor: 'rgba(0,0,0,0.2)' })
    this.shape.transformOrigin = 'top_left'
    this.shape.selectable = false
    this.scene.add(this.shape)

    this.mousedown = this.handleMousedown.bind(this)
    this.mousemove = this.handleMousemove.bind(this)
    this.mouseup = this.handleMouseup.bind(this)
    document.addEventListener('mousedown', this.mousedown)
    document.addEventListener('mousemove', this.mousemove)
    document.addEventListener('mouseup', this.mouseup)
  }
  close() {
    this.scene.remove(this.shape.getRgbaId())

    document.removeEventListener('mousedown', this.mousedown)
    document.removeEventListener('mousemove', this.mousemove)
    document.removeEventListener('mouseup', this.mouseup)
  }
  private handleMousedown(event: MouseEvent) {
    if (!this.scene.emptySpace) return
    this.enable = true
    this.shape.props.x = this.point.pre.x = event.offsetX
    this.shape.props.y = this.point.pre.y = event.offsetY

    // 将操作框层级设为最高
    const index = this.scene.shapes.findIndex(shape => shape.getRgbaId() == this.shape.getRgbaId())
    if (index > -1) {
      this.scene.shapes.splice(index, 1)
      this.scene.shapes.push(this.shape)
    }
  }
  private handleMousemove(event: MouseEvent) {
    if (!this.enable) return
    const { shape, point } = this
    point.cur.x = event.offsetX
    point.cur.y = event.offsetY
    shape.props.width = point.cur.x - point.pre.x
    shape.props.height = point.cur.y - point.pre.y
  }
  private handleMouseup() {
    this.enable = false
    const { props } = this.shape

    // if (this.select) {
    //   const l = props.x + (props.width > 0 ? 0 : props.width)
    //   const r = props.x + (props.width < 0 ? 0 : props.width)
    //   const t = props.y + (props.height > 0 ? 0 : props.height)
    //   const b = props.y + (props.height < 0 ? 0 : props.height)

    //   this.selectShape.forEach(shape => {
    //     shape.props.shadowBlur = 0
    //   })

    //   this.selectShape = this.scene.shapes.filter(shape => shape.selectable && this.is_rect_cross(
    //     l, b, r, t,
    //     shape.props.x + shape.props.lateX - shape.props.width / 2, shape.props.y + shape.props.lateY + shape.props.height / 2,
    //     shape.props.x + shape.props.lateX + shape.props.width / 2, shape.props.y + shape.props.lateY - shape.props.height / 2
    //   ))

    //   this.selectShape.forEach(shape => {
    //     shape.props.shadowBlur = 30
    //   })
      
    // }

    props.width = 0
    props.height = 0
  }
  // 判断两个矩形是否相交
  // (x1,y1) (x2,y2)为第一个矩形左下和右上角的两个点
  // (x3,y3) (x4,y4)为第二个矩形左下角和右上角的两个点
  is_rect_cross(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number) {
    if (Math.max(x1, x3) <= Math.min(x2, x4) && Math.min(y1, y3) >= Math.max(y2, y4)) {
      return true
    } else {
      return false
    }
  }
  // 判断矩形相交
  judgeIntersect(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number) {

    //快速排斥：
    //两个线段为对角线组成的矩形，如果这两个矩形没有重叠的部分，那么两条线段是不可能出现重叠的

    //这里的确如此，这一步是判定两矩形是否相交
    //1.线段ab的低点低于cd的最高点（可能重合）
    //2.cd的最左端小于ab的最右端（可能重合）
    //3.cd的最低点低于ab的最高点（加上条件1，两线段在竖直方向上重合）
    //4.ab的最左端小于cd的最右端（加上条件2，两直线在水平方向上重合）
    //综上4个条件，两条线段组成的矩形是重合的
    //特别要注意一个矩形含于另一个矩形之内的情况

    if (!(Math.min(x1, x2) <= Math.max(x3, x4) && Math.min(y3, y4) <= Math.max(y1, y2) && Math.min(x3, x4) <= Math.max(x1, x2) && Math.min(y1, y2) <= Math.max(y3, y4)))
      return false;

    //跨立实验：
    //如果两条线段相交，那么必须跨立，就是以一条线段为标准，另一条线段的两端点一定在这条线段的两段
    //也就是说a b两点在线段cd的两端，c d两点在线段ab的两端
    var u, v, w, z
    u = (x3 - x1) * (y2 - y1) - (x2 - x1) * (y3 - y1);
    v = (x4 - x1) * (y2 - y1) - (x2 - x1) * (y4 - y1);
    w = (x1 - x3) * (y4 - y3) - (x4 - x3) * (y1 - y3);
    z = (x2 - x3) * (y4 - y3) - (x4 - x3) * (y2 - y3);
    return (u * v <= 0.00000001 && w * z <= 0.00000001);
  }
}
